<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scale=no">
<title>login</title>
<link href="../bootstrap331/css/bootstrap.min.css" rel="stylesheet" >
<style type="text/css">
	#getverifycode{
		background:#FF0;
		border:0px;
	}
	#title{
		height:40px;
		line-height:40px;
		text-align:center;
		font:Tahoma, Geneva, sans-serif;
		font-size:24px;
		margin-bottom:40px;
	}

</style>
</head>
<body style="background:#eee">
<div class="container">
	<div class="row">
    	<div id="form_wrap" class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
        	<div id="title">
            	手机验证登录
            </div>
        	<form  id="loginform" action="/login/verify" method="post">
            	<div class="input-group form-group">
                    <input type="tel" class="form-control" name="phoneno" id="phonenotext" placeholder="请输入您的手机号"  >
                    <div class=" input-group-addon" style="padding:0px;border:0px; background:#eee;">
                    	<div  id="getverifycode"  class="btn btn-default">获取验证码</div>
                    </div>

                </div>
                <div class="form-group">
   					<input type="text" class="form-control" name="verifycode" id="verifycode" placeholder="请输入您收到的验证码" >
                </div>
                <div class="form-group">
  					<div  id="submitbutton" class="btn btn-default pull-right" style="margin:0 auto;">确定</div>
                </div>
			</form>
        </div>
    </div>
</div>



<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../bootstrap331/js/bootstrap.min.js"></script>

<script type="text/javascript">
	$(document).ready(function(e) {
        $("#form_wrap").css("margin-top",$(document).height()/5);
		
		$("#submitbutton").click(function(e) {
            var verifycode=$("#verifycode").val();
			if(verifycode==null||verifycode==""){
				alert("请输入验证码");
				return;	
			}
			
				
			var phoneno=$("#phonenotext").val();
			if(phoneno==null||phoneno==""){
				alert("请填写您的手机号！");
				return;	
			}
			
			$.ajax({
				url:"/login/verify",
				method:"post",
				data:$("#loginform").serialize(),
				
				success:function(data){
					
					window.androidjs.tomain();			
				},
				error:function(){
					alert("error");
				}
			});
			
			
        });
		$("#getverifycode").click(function(e) {
				
			var phoneno=$("#phonenotext").val();
			if(phoneno==null||phoneno==""){
				alert("请填写您的手机号！");
				return;	
			}
			
            $.ajax(
				{
					url:"/login/getverifycode",
					type:"post",
					data:{"phoneno":$("#phonenotext").val()},
					success: function(){
						time($("#getverifycode"),60);
					},
					error: function(){
						//alert("error");	
					}
				}
			)
        });
    });
	function resend(){
		$("#getverifycode").attr("disabled","disabled");
	}
	//点击获取短信验证码之后的倒计时效果
	function time(o,t) {//o为按钮的对象，t为倒计时的计时长度 
		var wait=t;
		if (wait == 0) { 
			o.removeAttr("disabled"); 
			o.text("获取验证码");//改变按钮中value的值 
						 
		} else { 
			o.attr("disabled", true);//倒计时过程中禁止点击按钮 
			o.text(wait + "秒后重发");//改变按钮中text的值 
			wait--; 
			setTimeout(function() { 
				time(o,wait);//循环调用 
				}, 
			1000) 
		} 
	} 
</script>
</body>
</html>
